import React from 'react';
import { InputNumber } from 'antd';
import { isNumber } from 'lodash';
import styled from './index.less';

function DoubleInput({ value = '', text = '', onChange, max = Infinity, min = -Infinity, step = 1 }) {
  let [v1 = 0, v2 = 0] = value.split(',');
  const changeValue = (val, type) => {
    let newValue = val;
    if (!isNumber(val) || val > max || val < min) {
      newValue = 0;
    }
    if (type === 'v1') {
      v1 = newValue;
    }
    if (type === 'v2') {
      v2 = newValue;
    }
    onChange(`${v1},${v2}`);
  };
  return (
    <div className={styled['double-input-box']}>
      {text && <span>{text}</span>}
      <div className={styled['input-group-box']}>
        <InputNumber style={{ width: '49%' }} {...{ min, max, step }} defaultValue={v1} onChange={(e) => changeValue(e, 'v1')} />
        <span className={styled['splic-symbol']}></span>
        <InputNumber style={{ width: '49%' }} {...{ min, max, step }} defaultValue={v2} onChange={(e) => changeValue(e, 'v2')} />
      </div>
    </div>
  );
}

export default DoubleInput;
